<template>
	<view>
		<block>
			<!-- 顶部 -->
      <view class="cartList cartBox">
        <view
            style="
            width: 100%;height:75rpx;
            background-color: rgba(149,165,166,0.13);
            font-weight: bold;line-height: 75rpx;
            font-size:36rpx;letter-spacing: 0.1em;
            color: rgba(46,213,115,0.93);text-align: center;"
        >
          <text>{{ plotDetail.plotName }}</text>
        </view>
        <view style="padding: 4rpx 0 0 10rpx;">

          <!--     距离       -->
          <view
              v-if="!service.check.isNull(plotDetail.juli)"
              style="position:absolute;
                  right:10rpx;bottom:10rpx;
                  color: #7f8c8d;font-size: 27rpx;
                  font-weight: bold;"
          >
            <text>
              {{ service.html.distanceText(plotDetail.juli) }}
            </text>
          </view>

          <view style="display: inline-block;">
            <u--image
                :src="imgapi+plotDetail.avatar"
                width="150px"
                height="150px"
                radius="10px"
                @click="service.previewImg([imgapi+plotDetail.avatar])"
            >
            </u--image>
          </view>
          <view
              style="
              display: inline-block;
              vertical-align:top;
              margin-left: 10rpx;"
          >
            <view>
              <view class="item">
                <text class="labelFont">
                  区域:
                </text>
                <text class="contentFont" style="font-weight: bold;">
                  {{ service.html.isNullToStr(plotDetail.nameTit) }}
                </text>
              </view>

              <view class="item">
                <text class="labelFont">面积:</text>
                <text
                    class="contentFont"
                    style="color: #636e72 !important;
                        font-weight: bold"
                >
                  {{service.check.arrItemIsNull([plotDetail.regionLon,plotDetail.regionWide]) ? '丢失'
                    : plotDetail.regionLon + "(长)×" + plotDetail.regionWide + "(宽) ㎡"}}
                </text>
              </view>

              <view class="item">
                <text class="labelFont">
                  套餐:
                </text>
                <text
                    class="contentFont"
                    style="font-weight: bold;
                    font-size: 29rpx !important;
                    color: #636e72 !important"
                >
                  {{ service.html.isNullToStr(item.describe) }}
                </text>
              </view>

              <view class="item">
                <text class="labelFont">
                  租期:
                </text>
                <text
                    class="contentFont"
                    style="color: #636e72 !important;
                        font-weight: none"
                >
                  {{item.day}}天
                </text>
              </view>

              <view class="item">
                <text class="labelFont">
                  租金:
                </text>
                <view style="display: inline-block">
                  <u--text
                      mode="price"
                      color="#ffa502"
                      size="18"
                      :text="service.html.isNullToStr(item.price)"
                  >
                  </u--text>
                </view>
              </view>

              <view class="item">
                <text class="labelFont">
                  押金:
                </text>
                <view style="display: inline-block">
                  <u--text
                      mode="price"
                      color="#ffa502"
                      size="18"
                      :text="service.html.isNullToStr(plotDetail.deposit)"
                  >
                  </u--text>
                </view>
              </view>

            </view>
          </view>

          <view class="my_line"></view>

          <view style="margin: 0 10rpx">

            <view
                class="item"
                v-if="!service.check.isNull(item.remark)"
            >
              <text class="labelFont">
                套餐备注:
              </text>
              <text
                  class="contentFont"
                  style="font-weight: none;
                  font-size: 16px !important;
                  color: #535c68 !important;"
              >
                {{ service.html.isNullToStr(item.remark) }}
              </text>
            </view>

            <view class="item">
              <uni-icons type="location" size="30" color="#636e72"></uni-icons>
              <view style="display: inline-block;width: 70%">
                <text
                    class="contentFont"
                    style="font-size: 29rpx !important;
                  position: relative;top:-10rpx;color: #636e72 !important"
                >
                  {{ service.html.isNullToStr(plotDetail.address)}}
                </text>
              </view>
            </view>
          </view>

        </view>
      </view>

			<!-- 订单信息 -->
			<view class="cartBox" v-if="flg">
				<view class="cartList">
					<view class="plotAddress">
						<text>订单信息</text>
						<view class="plotAddressBorder detailsBoxLeft">
							<view v-if="item.describe">订单编号：
								<view class="fontColor">{{item.describe}}</view>
							</view>
							<view >创建时间：
								<view class="fontColor">
									<view style="transform: scale(.8);display: inline-block;">
										￥
									</view>
								{{item.price}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 支付方式 -->
			<view class="cartBox">
				<view class="cartList">
					<view class="plotAddress">
						<text>支付方式</text>
						<radio-group name="pay" @change="payWay">
							<view class="plotAddressBorder between">
								<view class="center_vertical">
									<view>
										<image src="https://www.tdtye.com/files/vegetable_mall_file/default/static/growVegetables/pay_icon.png" class="icon"></image>
									</view>
									<view>
										微信支付
									</view>
								</view>
								<view>
									<radio value="wechat" />
								</view>
							</view>
							<view class="plotAddressBorder between">
								<view class="center_vertical">
									<view>
										<image src="https://www.tdtye.com/files/vegetable_mall_file/default/static/growVegetables/wallet_icon.png" class="icon">
										</image>
									</view>
									<view>
										余额支付
									</view>
								</view>
								<view>
									<radio value="balance" />
								</view>
							</view>
						</radio-group>
					</view>
				</view>
			</view>
			
			<!-- 备注 -->
			<view class="cartList cartBox">
        <u--textarea
            v-model="form.remark"
            placeholder="填写备注信息"
            count
            autoHeight
            maxlength="20"
        ></u--textarea>
			</view>
			
			<!-- 底部栏 -->
			<view class="cartBottom">
				<view class="allcount">总计:<text class="food-price" style="margin-left: 10rpx;">￥{{item.price + plotDetail.deposit}}</text></view>
				<view class="rightbot">
					<view class="settlementBox" @click="subOrder">提交订单</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import Skeleton from '@/components/ls-skeleton/ls-skeleton.nvue';
  import service from "@/utils/service";
	export default {
		components:{
			Skeleton
		},
		data() {
			return {
			  service: service,
				form: {
					id: "",
					amount: 0.0,
					img: [],
					remark: "",
					payWay: ""
				},
				getAddress:'请选择您的收货地址',
				base64Arr: [],
				product: {},
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				weight: null,
				checked: false,
				imgapi: "",
				mark: '',
				totalPrice: 0.00, //总价
				
				plotDetail: null,//租赁信息
				item:null,//选中套餐信息
				flg:true,//展示订单信息
				
				
			}
		},
		onLoad(e) {
			this.item = JSON.parse(e.item)
			this.plotDetail = JSON.parse(uni.getStorageSync('plotDetail'))
			uni.removeStorageSync('plotDetail');
      console.log('plotDetail  :' ,this.plotDetail)
			if(this.item.type == 1){
				this.flg = false
			}

			this.imgapi = this.$reqConfig.URLIMAGE
			this.form.type = 1
			
			
		},
		methods: {
      dingyue() {
        //获取订阅消息权限
        uni.requestSubscribeMessage({
          //此处填写刚才申请模板的模板ID
          tmplIds: ['s7ZZ8opxPGkuCdexJnwhE882MzSxwKYXTw_ebj7gxBU'],
        })
      },
			//单选事件
			payWay(e) {
				console.log(e.detail.value)
				this.form.payWay = e.detail.value
			},
			getaddress(){
				wx.chooseAddress({
				  success (res) {
					console.log(res)
				    console.log(res.userName)
				    console.log(res.postalCode)
				    console.log(res.provinceName)
				    console.log(res.cityName)
				    console.log(res.countyName)
				    console.log(res.detailInfo)
				    console.log(res.nationalCode)
				    console.log(res.telNumber)
				  }
				})
			},
			//提交订单，点击提交订单按钮的时候加一个加载图标的全局遮罩，等请求完成后再放开
      subOrder() {
			  let _t = this;
        if (!this.form.payWay) {
          uni.showToast({
            title: "请选择支付方式",
            icon: 'none',
            duration: 2000
          })
          return;
        }
        uni.showLoading({
          title: "订单提交中"
        })
        this.$axios({
          url: `/user/rent/subOrder`,
          method: "post",
          data: {
            id: this.item.regionId,
            rentMenuId: this.item.id,
          }
        }).then(async (res) => {
          //这里取消遮罩，然后提示订单提交成功,再然后就跳转到支付页面，支付有微信支付和余额支付两种
          if (res.code === 0) {
            uni.showToast({
              title: "订单提交成功",
              icon: 'none',
              duration: 2000
            })

            //成功提交执行对应操作
            if (this.form.payWay === "balance") {
              uni.showLoading({
                title: "余额支付中......"
              })
              this.balancePay(res.result)
            } else {
              let wxOrderRes = await service.request.createWxOrder(res.result,6,_t.$axios);
              if(wxOrderRes.code === 0){
                service.request.wxPayment(wxOrderRes.result,
                    function success(res){
                      console.log("微信支付 : " ,res)
                      uni.showToast({
                        title: '微信支付成功',
                        duration: 4000,
                        mask: true
                      })
                      //跳转到订单列表
                      uni.redirectTo({
                        url: '../mine/rentOrder'
                      })
                      _t.dingyue();
                    },
                    function fail(res){
                      console.log("微信支付失败...")
                      uni.showToast({
                        title: '微信支付失败...',
                        duration: 4000,
                        icon: 'none',
                      })
                      //跳转到订单列表
                      uni.redirectTo({
                        url: '../mine/rentOrder'
                      })
                    },
                )
              }
              else{
                uni.showToast({
                  title: '创建微信订单失败 : ' + wxOrderRes.result,
                  icon: 'none'
                })
                //跳转到订单列表
                uni.redirectTo({
                  url: '../mine/rentOrder'
                })
              }
            }
          }
        }).finally(() => {
          uni.hideLoading()
        })
      },

			// 余额支付
			balancePay(orderNum) {
			  let _t = this;
				this.$axios({
					url: `user/rent/payAmount`,
					method: "post",
					data: {
						orderNum: orderNum,
					}
				}).then((res) => {
					if (res.code === 0) {
						uni.showToast({
							title: "支付成功!",
							icon: 'none',
							duration: 2000
						})
            //跳转到订单列表
            uni.redirectTo({
              url: '../mine/rentOrder'
            })
            _t.dingyue();
					} else {
						uni.showToast({
							title: res.result,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},

			uploadPhotos() {
				let that = this
				uni.chooseImage({
					count: 3,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'],
					success: function(e) {
						console.log(e.tempFilePaths)
						//遍历数组，转化为base64类型并添加到base64arr数组里						
						e.tempFilePaths.forEach((item) => {
							if (that.form.img.length < 3) {
								that.base64Arr.push(item)
								that.form.img.push("data:image/jpeg;base64," + uni
									.getFileSystemManager().readFileSync(item, 'base64'))
							} else {
								uni.showToast({
									title: '最多可上传3张',
									icon: 'none',
									duration: 2000
								})
							}
						})
					}
				});
			},
			//计算总价
			count() {
				//保留2位
				this.totalPrice = (this.form.amount * this.product.price).toFixed(2)
			},
			checkeds() {
				this.checked = !this.checked
				console.log('3333')
			}

		}
	}
</script>

<style scoped>
	.shopBottomBoxleft {
		width: 35%;
		text-align: center;
	}
	.collectionimg {
		width: 60rpx;
		height: 60rpx;
	}
	.shopBottomText {
		font-size: 25rpx;
	}
	.futext{
		color: rgb(143, 147, 156);
		font-size: 35rpx;
		font-weight: normal;
	}
	.fontColor{
		color: #a0a2a7;
		display: inline-block;
	}
	.detailsBox {
		height: 180rpx;
		width: 750rpx;
		padding: 20rpx 0 ;
		display: flex;
	}
	.detailsBoxLeft {
		width: 65%;
		font-size: 35rpx;
		color: #808080;
		/* background-color: #00A0DC; */
	}
	
	/* ----------- */
	.plotAddress {
		margin: 15rpx 15rpx 25rpx;
		font-size: 13px;
		text-align: left;
		/* color: #777777; */
	}

	.icon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
		margin-top: 10rpx;
	}

	.cartBox {
		width: 95vw;
		margin: 20rpx auto 0 auto;
	}

	.plotAddressBorder {
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-top: 0.5rpx solid #eeeeee;
		width: 100%;
	}

	.cartBoxBot2 {
		display: flex;
		justify-content: space-between;
		margin: 15rpx 15rpx 25rpx;
		/* padding-top:20rpx; */
	}

	.cartList {
		/* height: calc(22vw + 34rpx); */
		border-radius: 12rpx;
		background-color: #fff;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, .1);
		position: relative;
	}

	.phoFlex {
		display: flex;
		margin-left: 20rpx;
	}

	.checkboxBox {
		padding-left: 16rpx;
		flex-shrink: 0;
		height: 22vw;
		line-height: 22vw;
		margin-right: 16rpx;
		align-items: center;
		position: relative;
		width: 30rpx;
	}



	.rightBox {
		height: 22vw;
		padding-right: 15rpx;
		position: relative;
		margin-right: 45rpx;
	}

	.rightBoxtop {
		text-align: left;
		font-size: 35rpx;
		font-weight: bold;
		white-space: nowrap;
	}

	.food-btm {
		text-align: left;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.food-price {
		color: #f01414;
		font-size: 16px;
	}

	.photobtn {
		margin-left: 10rpx;
		height: 50rpx;
		font-size: 18rpx;
		width: 130rpx;
		line-height: 50rpx;
	}

	.cartBottom {
		padding-left: 20rpx;
		width: 750rpx;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		height: 11vw;
		display: flex;
		align-items: center;
	}

	.allcount {
		color: #C4C4C4;
		margin-left: 20rpx;
	}

	.delBox {
		height: 9vw;
		width: 120rpx;
		border-radius: 30rpx;
		margin-right: 20rpx;
		line-height: 9vw;
		text-align: center;
		color: #fff;
		background-color: #C4C4C4;
	}

	.settlementBox {
		height: 9vw;
		width: 180rpx;
		padding: 0 50rpx;
		border-radius: 40rpx;
		margin-right: 20rpx;
		line-height: 9vw;
		text-align: center;
		color: #fff;
		background-color: #3cc51f;

	}

	.rightbot {
		margin-right: 15rpx;
		position: absolute;
		right: 0;
		display: flex;
	}

	.photoBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 680rpx;
		height: 130rpx;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 20rpx;
	}
	
	.xinxi image{
		width: 100%;
	}

  .item{
    margin-bottom: 4rpx;
  }
  .labelFont{
    padding-right: 4rpx;
    letter-spacing: 0.1em;
    font-size: 28rpx;
    color: #7f8c8d;
  }
  .contentFont{
    font-size: 32rpx !important;
    letter-spacing: 2rpx !important;
    color: #222f3e !important;
  }
  .my_line{
    margin: 10rpx auto;
    width: 98%;
    border: solid 0.5rpx #bbb;
    background-color: #bbb;
  }
</style>
